<template>

	<body>
		<div class="loan_nav col_nav">
			<ul>
				<li>
					<a href="javascript:history.go(-1)">
						<i class="iconfont">&#xe61e;</i>
					</a>
				</li>
				<li>
					<p>绑定银行卡</p>
				</li>
				<li></li>
			</ul>
		</div>
		<div class="interval_T">

		</div>
		<div class="withdrawals_form">
			<ul>
				<li>
					<p>姓名</p>
				</li>
				<li><input v-model="params.userName" type="text" placeholder="请输入姓名" /></li>
			</ul>
		</div>
		<div class="withdrawals_form">
			<ul>
				<li>
					<p>身份证号</p>
				</li>
				<li><input v-model="params.cardNo" type="text" placeholder="请输入身份证号" /></li>
			</ul>
		</div>
		<div class="withdrawals_form">
			<ul>
				<li>
					<p>卡号</p>
				</li>
				<li><input v-model="params.bankCardNo" type="text" placeholder="请输入储蓄卡号" /></li>
			</ul>
		</div>
		<div class="withdrawals_form">
			<ul>
				<li>
					<group>
						<popup-picker
							placeholder="请选择银行"
							title="银行"
							:data="list2"
							v-model="params.bankName"
							value-text-align="left">
						</popup-picker>
					</group>
				</li>
			</ul>
		</div>
		<div class="withdrawals_form">
			<ul>
				<li>
					<p>手机号</p>
				</li>
				<li><input v-model="params.mobile" type="text" placeholder="请输入预留手机号" /></li>
			</ul>
		</div>
		<!-- <div class="withdrawals_form">
			<ul>
				<li>
					<p>验证码</p>
				</li>
				<li><input type="text" placeholder="请输入验证码" /></li>
			</ul>
		</div> -->
		<div class="btn">
			<input @click="save" type="button" value="立即绑定" class="col-green" />
		</div>
	</body>
</template>

<script>
import { Group, PopupPicker } from 'vux'
export default {
	components: {
		Group,
		PopupPicker
	},
	data() {
		return {
			params: {},
			list2: [['建设银行', '招商银行', '中国银行', '农业银行', '工商银行', '厦门银行', '平安银行', '民生银行']]
		}
	},
	created() {
		this.query()
	},
	methods: {
		query() {
			this.$http.get('/app/bankcard/info').then(json => {
				const { code, bankCard } = json
				if(code === 0) {
					const { userName, cardNo, mobile, bankName, bankCardNo } = bankCard
					this.params = { userName, cardNo, mobile, bankCardNo }
					this.$set(this.params, 'bankName', [bankName])
				}
			})
		},
		save() {
			const params = { ...this.params }
			params.bankName = params.bankName[0]
			this.$http.post('/app/bankcard/save', params).then(json => {
				const { code } = json
				if(code === 0) {
					this.$vux.toast.show({ text: '保存成功' })
					this.$router.back()
				}
			})
		}
	}
}
</script>

<style>
.withdrawals_form .weui-label {
  font-size: 0.26rem !important;
  width: 1rem !important;
}
.vux-popup-picker-value {
  font-size: 0.26rem !important;
}
.withdrawals_form .vux-popup-picker-select {
  padding-left: 0.2rem !important;
}
.weui-cell {
  padding: 0 !important;
}
.vux-no-group-title {
  margin: 0 !important;
}
.weui-cells {
  background: none !important;
}
.weui-cells:before {
  border: none !important;
}
.weui-cells:after {
  border: none !important;
}
.vux-popup-picker-placeholder {
  font-size: 0.26rem !important;
}
</style>